<template>
  <a-modal
    title="缺貨提示詳情"
    :width="1256"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('cancel') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading" style="padding:15px 25px;">
      <a-form :form="form" v-bind="formLayout">
        <a-row class="form-row" :gutter="48">
          <div v-for="(v, k) in fields" :key="k">
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item :label="v.label">
                <template v-if="v.type == 'select'">
                  <a-select
                    v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required,message: v.message}]}]"
                    @change="v.onChange">
                    <a-select-option :key="sk" v-for="(item,sk) in selectList[v.listName]" :value="v.listValue?item[v.listValue]:item">{{
                      item[v.listLabel] }}
                    </a-select-option>
                  </a-select>
                </template>
                <template v-else-if="v.type == 'textarea'">
                  <a-textarea :auto-size="{ minRows: 5, maxRows: 10 }" v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required,message: v.message}]}]"/>
                </template>
                <template v-else-if="v.type == 'password'">
                  <a-input-password v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required,message: v.message}]}]" placeholder="請輸入密碼"/>
                </template>
                <template v-else-if="v.type == 'upload'">
                  <a-upload
                    name="file"
                    :showUploadList="false"
                    :customRequest="upload"
                  >
                    <a-button> <a-icon type="upload" /> Click to Upload </a-button>
                  </a-upload>
                  <span v-if="model!==null">{{ model[v.key] }}</span>
                </template>
                <template v-else-if="v.type == 'date'">
                  <a-date-picker valueFormat="yyyy-MM-DD" v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required,message: v.message}]}]" />
                </template>
                <template v-else-if="v.type == 'number'">
                  <a-input v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required, min: 0, message: v.message, type: 'number',transform(value){return Number(value)}}]}]"/>
                </template>
                <template v-else>
                  <a-input v-decorator="[v.key, {initialValue:model?model[v.key]:'',rules: [{required: v.required, min: 0, message: v.message}]}]"/>
                </template>
              </a-form-item>
            </a-col>
          </div>
        </a-row>
      </a-form>
      <a-table :columns="columns" :data-source="warehouseGoodData" :pagination="false">
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
        <span slot="tags" slot-scope="tags">
          <a-tag
            v-for="tag in tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
        <span slot="action" slot-scope="text, record ,index">
          <a @click="handleDelete(index)">删除</a>
        </span>
      </a-table>
      <span>出貨記錄</span>
      <a-table :columns="columnsDeliveryRecord" :data-source="deliveryRecord" :pagination="false">
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
        <span slot="tags" slot-scope="tags">
          <a-tag
            v-for="tag in tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
        <span slot="action" slot-scope="text, record ,index">
          <a @click="handleDelete(index)">删除</a>
        </span>
      </a-table>
      <span>報損記錄</span>
      <a-table :columns="columnsDamageRecord" :data-source="damageRecord" :pagination="false">
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
        <span slot="tags" slot-scope="tags">
          <a-tag
            v-for="tag in tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
        <span slot="action" slot-scope="text, record ,index">
          <a @click="handleDelete(index)">删除</a>
        </span>
      </a-table>
      <span>退貨到供應商記錄</span>
      <a-table :columns="columnsReturnRecord" :data-source="returnRecord" :pagination="false">
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
        <span slot="tags" slot-scope="tags">
          <a-tag
            v-for="tag in tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
        <span slot="action" slot-scope="text, record ,index">
          <a @click="handleDelete(index)">删除</a>
        </span>
      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
    import pick from 'lodash.pick'
    import { _getAllWarehouseGood, _getDeliveryRecordByIdGoo, _getDamageRecordByIdGoo, _getReturnGoodsByIdGoo } from '@/api/WarehouseGood'
    // 表单字段

    export default {
        props: {
            visible: {
                type: Boolean,
                required: true
            },
            model: {
                type: Object,
                default: () => null
            }
        },
        data () {
            this.formLayout = {
            }
            return {
                form: this.$form.createForm(this),
                fields: [
                ],
                loading: false,
                selectList: {
                },
              warehouseGoodData: [],
              columns: [
                {
                  title: '货品编号',
                  dataIndex: 'goodNo'
                },
                {
                  title: '貨品類別',
                  dataIndex: 'categoryName'
                },
                {
                  title: '货品類型',
                  dataIndex: 'goodType',
                  customRender: (data) => {
                    if (data === 0) {
                      return '乾貨'
                    } else {
                      return '蔬菜'
                    }
                  }
                },
                {
                  title: '货品名称',
                  dataIndex: 'goodName'
                },
                {
                  title: '貨品件數',
                  dataIndex: 'quantity'
                },
                {
                  title: '貨品單位',
                  dataIndex: 'goodUnit'
                },
                {
                  title: '貨品每件數量',
                  dataIndex: 'piecesPerUnit'
                },
                {
                  title: '貨品進貨總數',
                  dataIndex: 'totalCount',
                  customRender: (data, record) => {
                    return record.piecesPerUnit * record.realUnitCount
                  }
                },

                {
                  title: '貨品進貨價格（總數）',
                  dataIndex: 'totalAmount',
                  customRender: (data, record) => {
                    return record.pricePerUnit * record.realUnitCount
                  }
                },
                {
                  title: '貨品進貨價格（每單位）',
                  dataIndex: 'amountPerUnit',
                  customRender: (data, record) => {
                    return record.pricePerUnit / record.piecesPerUnit
                  }
                },
                {
                  title: '到期日',
                  dataIndex: 'expirationDate',
                  customRender: (date) => {
                    return this.$options.filters.formatDate(date)
                  }
                },
                {
                  title: '仓存位置',
                  dataIndex: 'warehouseName'
                },
                {
                  title: '來貨日期',
                  dataIndex: 'purchaseDate',
                  customRender: (date) => {
                    return this.$options.filters.formatDate(date)
                  }
                }
              ],
              deliveryRecord: [],
              columnsDeliveryRecord: [
                {
                  title: '從',
                  dataIndex: 'warehouseName'
                },
                {
                  title: '到',
                  dataIndex: 'branchStoreName'
                },
                {
                  title: '數量',
                  dataIndex: 'quantity'
                }
              ],
              damageRecord: [],
              columnsDamageRecord: [
                {
                  title: '货品编号',
                  dataIndex: 'goodsNo'
                },
                {
                  title: '貨品類別',
                  dataIndex: 'categoryName'
                },
                {
                  title: '货品類型',
                  dataIndex: 'goodType',
                  customRender: (data) => {
                    if (data === 0) {
                      return '乾貨'
                    } else {
                      return '蔬菜'
                    }
                  }
                },
                {
                  title: '货品名称',
                  dataIndex: 'goodsNameHk'
                },
                {
                  title: '貨品件數',
                  dataIndex: 'quantity'
                }
              ],
              returnRecord: [],
              columnsReturnRecord: [
                {
                  title: '退到供應商名稱',
                  dataIndex: 'supplierName'
                },
                {
                  title: '貨品件數',
                  dataIndex: 'quantity'
                }
              ],
              visibleGoods: false,
              mdlGoods: null,
              idQuo: 0
            }
        },
        created () {
            // 防止表单未注册
            this.fields.forEach((v, i) => this.form.getFieldDecorator(v.key))
            // 当 model 发生改变时，为表单设置值
            this.$watch('model', () => {
                this.model && this.form.setFieldsValue(pick(this.model, this.fields))
            })
          this.$watch('visible', (val) => {
            if (val) {
              _getAllWarehouseGood(this.model.idGoo).then((ret) => {
                this.warehouseGoodData = ret.data
              })
              _getDeliveryRecordByIdGoo(this.model.idGoo).then((ret) => {
                this.deliveryRecord = ret.data
              })
              _getDamageRecordByIdGoo(this.model.idGoo).then((ret) => {
                this.damageRecord = ret.data
              })
              _getReturnGoodsByIdGoo(this.model.idGoo).then((ret) => {
                this.returnRecord = ret.data
              })
            }
          })
        },
        mounted () {
        },
        methods: {
            // handler
        }
    }
</script>
